<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div style="width: 100px; height: 100px; background-color: red; position: absolute; left: 0; top: 0;"></div>
	<script type="text/javascript">
		var div = document.getElementsByTagName('div')[0];
		var disX,
			disY;
		div.onmousedown = function (e) {
			
			disX = e.pageX - parseInt(div.style.left);
			disY = e.pageY - parseInt(div.style.top);
			document.onmousemove = function (e) {//鼠标挪动太快，事件监听没那么快
				var event = e || window.event;
				div.style.left = e.pageX - disX + 'px';
				div.style.top = e.pageY - disY  + 'px';
			}
			document.onmouseup = function () {
				document.onmousemove = null;
			}
		}
		
		div.onmouseenter = function () {
			div.style.backgroundColor = 'blue'
		}

		div.onmouseleave = function () {
			div.style.backgroundColor = 'yellow'
		}

	</script>
</body>
</html>

click, mousedown, mousemove, mouseup, contextmenu(默认右键菜单)，mouseover移入,mouseout移出，（mouseenter,mouseleave H5写法）
<script type="text/tpl">
	document.onmouseup =function () {
		console.log('up')
	}
	document.onclick = function () {
		console.log('click')
	}
	document.onmousedown = function () {
		console.log('down')
	}
</script>

用button来区分鼠标的按键，0、1、2
DOM3标准规定：click事件只能监听左键，能触发右键的只有mouseup,mousedown

<script type="text/javascript">
	document.onmousedown = function (e) {
		if(e.button == 2){
			console.log('right')
		}else if(e.button == 0){
			console.log('left')
		}else{
			console.log('middle')
		}
	}
</script>

区分点击和拖拽
<script type="text/javascript">
	var fristTime = 0;
	var lastTime = 0;
	var key = false;
	document.onmousedown = function () {
		fristTime = new Date().getTime();
	}

	document.onmouseup = function () {
		lastTime = new Date().getTime();
		if(lastTime - fristTime < 300){
			key = true
		}
	}

	document.onclick = function () {
		if (key) {
			console.log('click')
		}
		key = false;
	}
</script>

移动端
touchstart  touchmove  touchend